<script lang="ts" setup>
import "@/utils/rem"
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
import { getComboDetail } from "@/api/combo"
import { useCascaderAreaData } from "@vant/area-data"
import { showToast } from "vant"
import { createOrderH5DataApi, uploadCidImageList } from "@/api/order"
import { getPListDataApi } from "@/api/orderH5"
import { getEwmUrl } from "@/api/combo-h5"
import { ElMessage } from "element-plus"
import { useCommonStore } from "@/store/modules/common"
import xieYi from "@/views/productH5/xieyi.vue"
import { useScrollParent, useEventListener } from "@vant/use"
const isHeight = ref<any>("")
const commonStore = useCommonStore()
import { Md5 } from "ts-md5"
const md5 = new Md5()
const isCardPhoto = ref<boolean>(false)
const fileList = ref<any>([]) //正面
const fileList1 = ref<any>([]) //反面
const fileList2 = ref<any>([]) //人像
const upTips = "证件四角边缘空隙2厘米以上,手机横拍,照片清晰不模糊,无水印,无反光,无PS"
const upTips1 =
  "请使用手机前置摄像头实拍,不要使用证件照,不要戴眼镜饰品;保证五官清晰,着装整齐且漏出双肩,避免人像遮挡,避免纯色背景入镜导致开卡失败"

const formData = reactive<any>({})
const checked = ref(false)
/**联级选择 */
const show = ref<boolean>(false)
const show1 = ref<boolean>(false)
const show2 = ref<boolean>(false)
const showOver = ref<boolean>(false)
const isChange = ref<boolean>(false)
const isUPorDown = ref<string>("false")
//是否有二维码
const ewmpop = ref<any>("")
const carderAd = ref<string>("")
const adProvince = ref<string>("")
const adCity = ref<string>("")
const adDistinguish = ref<string>("")
const cascaderValue = ref<string>("")
const options = useCascaderAreaData()
const page = ref<number>(1)
const size = ref<number>(30)
const count = ref<number>(0)
const onFinish = ({ selectedOptions }: any) => {
  show.value = false
  // console.log(selectedOptions.map((option: any) => option.text))
  adProvince.value = selectedOptions.map((option: any) => option.text)[0]
  adCity.value = selectedOptions.map((option: any) => option.text)[1]
  adDistinguish.value = selectedOptions.map((option: any) => option.text)[2]
  console.log(adProvince, adCity, adDistinguish)
  carderAd.value = selectedOptions.map((option: any) => option.text).join("/")
  page.value = 1
  count.value = 0
  formData.h5_handle_mobile = ""
  formData.phone_type = ""
  // console.log(adCity.value)
}
/**END */
const flag = ref<boolean>(false)
const router = useRouter()
// const imgUrl = ref<string>("/src/assets/layout/bgh5.jpg")
const imgUrl = ref<any>("")
// const isCard = ref<boolean>(false)
const isPbtn = ref<boolean>(false)
const RWORYH = ref<string>("")
const YYS = ref<number>(NaN)
const pid = router.currentRoute.value.query.p
const tid = router.currentRoute.value.query.u
const sysId = router.currentRoute.value.query.s
const diy = router.currentRoute.value.query.d
const currentIndex = ref<any>(-1)
const phoneNumberList = ref<any>([])
const fuzzyKey = ref<any>("")
/**根据id查详情 */
const getProductInfo = async () => {
  await getComboDetail({
    id: pid
  }).then(async (res: any) => {
    if (res.code == 200) {
      flag.value = true
    }
    document.title = res.data.name
    YYS.value = res.data.operator
    formData.h5_package_name = res.data.name
    isUPorDown.value = res.data.state
    isCardPhoto.value = res.data.photo
    isChange.value = res.data.isChange
    await imgHeight(res.data.image)
  })
}
getProductInfo()
/**查询团队二维码弹窗 */
const getEwmPop = () => {
  getEwmUrl({ userId: tid }).then((res: any) => {
    if (res.code == 200 && res.data.img) {
      ewmpop.value = res.data.img
    }
  })
}
getEwmPop()
const imgHeight = (url: any) => {
  return new Promise((resolve, reject) => {
    const imgObj = new Image()
    imgObj.src = url
    imgObj.onload = () => {
      imgUrl.value = url
      isHeight.value = imgObj.height / 100 + "rem"
    }
    // console.log(imgObj)
    reject("")
  })
}

/**END */
/** 订单提交*/
const onSubmit = async (values: any) => {
  md5.appendAsciiStr(`PpDQAoixthgjkz6fJCnB${pid}dachengkeji${Math.floor(new Date().getTime() / 100000)}`)
  console.log(values)
  if (!checked.value) {
    window.pageYOffset = 0
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    showToast(`请阅读入网协议和用户隐私政策`)
    return
  }
  const PReg =
    // /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
    /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
  if (!formData.h5_phone || !PReg.test(formData.h5_phone)) {
    window.pageYOffset = 0
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    showToast(`请输入正确的手机号`)
    return
  }
  if (!carderAd.value || !formData.h5_address) {
    showToast(`请输入收货地址`)
    window.pageYOffset = 0
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    return
  }
  console.log(carderAd.value)

  //身份证姓名汉字验证
  const NameReg = /^(?:[\u4e00-\u9fa5·]{2,16})$/
  if (!formData.h5_card_name || !NameReg.test(formData.h5_card_name)) {
    window.pageYOffset = 0
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    showToast(`请输入正确的姓名`)
    return
  }

  const arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2] //加权因子
  const arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2] //校验码
  if (/^\d{17}\d|x$/i.test(formData.h5_card_id)) {
    let sum = 0
    const idx = ref<any>()
    for (let i = 0; i < formData.h5_card_id.length - 1; i++) {
      // 对前17位数字与权值乘积求和
      sum += parseInt(formData.h5_card_id.substr(i, 1), 10) * arrExp[i]
    }
    // 计算模（固定算法）
    idx.value = sum % 11
    // 检验第18为是否与校验码相等
    if (arrValid[idx.value] == formData.h5_card_id.substr(17, 1).toUpperCase()) {
      console.log(1)
    } else {
      showToast("身份证号不正确！")
      return
    }
  } else {
    showToast("身份证号不正确！")
    return
  }

  const fileData = new FormData()
  const fileData1 = new FormData()
  const fileData2 = new FormData()
  fileList.value.forEach((file: any) => {
    fileData.append("file", file.file)
    fileData.append("name", formData.h5_card_name)
  })
  fileList1.value.forEach((file: any) => {
    fileData1.append("file", file.file)
    fileData1.append("name", formData.h5_card_name)
  })
  fileList2.value.forEach((file: any) => {
    fileData2.append("file", file.file)
    fileData2.append("name", formData.h5_card_name)
  })
  if (isCardPhoto.value) {
    show2.value = true
    if (fileList.value.length === 0) {
      ElMessage.error("请按照要求上传身份证信息")
      show2.value = false
      return
    }
    await uploadCidImageList(fileData)
      .then((res: any) => {
        if (res.code == 200) {
          formData.cardFront = res.data.split("/image/")[1]
        }
      })
      .catch(() => {
        show2.value = false
      })
    if (fileList1.value.length === 0) {
      ElMessage.error("请按照要求上传身份证信息")
      show2.value = false
      return
    }
    await uploadCidImageList(fileData1)
      .then((res: any) => {
        if (res.code == 200) {
          formData.cardBack = res.data.split("/image/")[1]
        }
      })
      .catch(() => {
        show2.value = false
      })
    if (fileList2.value.length === 0) {
      ElMessage.error("请按照要求上传身份证信息")
      show2.value = false
      return
    }
    await uploadCidImageList(fileData2)
      .then((res: any) => {
        if (res.code == 200) {
          formData.cardPhoto = res.data.split("/image/")[1]
        }
      })
      .catch(() => {
        show2.value = false
      })
    // if (!formData.cardFront || !formData.cardBack || !formData.cardPhoto) {
    //   ElMessage.error("请按照要求上传身份证信息")
    //   return false
    // }
  }
  await createOrderH5DataApi({
    sku: pid,
    systemId: sysId,
    cardName: formData.h5_card_name,
    consignee: formData.h5_card_name,
    cardID: formData.h5_card_id,
    h5_handle_mobile: formData.h5_handle_mobile,
    phone_type: formData.phone_type,
    cardFront: formData.cardFront,
    cardBack: formData.cardBack,
    cardPhoto: formData.cardPhoto,
    takeAddress: `${carderAd.value.replace(/\//g, " ")} ${formData.h5_address}`,
    takeMobile: formData.h5_phone,
    recorder: tid,
    diy

    // key: PW
  })
    .then((res: any) => {
      if (res.code == 200) {
        showToast("下单成功")
        // 清空reactive对象里面的key值
        Object.keys(formData).map((key) => {
          delete formData[key]
        })
        checked.value = false
        carderAd.value = ""
        cascaderValue.value = ""
        fileList.value = []
        fileList1.value = []
        fileList2.value = []
        showOver.value = true
      }
    })
    .catch(() => {
      show2.value = false
      showOver.value = false
    })
    .finally(() => {
      show2.value = false
      checked.value = false
      carderAd.value = ""
      cascaderValue.value = ""
    })
}
const root = ref()
const scrollParent = useScrollParent(root)

useEventListener(
  "scroll",
  () => {
    // console.log(e)
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop >= 880) {
      isPbtn.value = true
    } else {
      isPbtn.value = false
    }
  },
  { target: scrollParent }
)

//自助选号
const changeNb = () => {
  if (formData.h5_card_name || formData.h5_card_id) {
    getPnList("", "")
    showNumber.value = true
  } else {
    showToast("请先填写个人信息")
  }
}
const searchKey = ref<any>("")
//键盘搜索
const searchNum = (val: any) => {
  searchKey.value = val
  getPnList(0, val)
}
//搜索按钮搜索1
const onClickButton = () => {
  // console.log(val)
  // getPnList(0, searchKey.value)
  searchNum(fuzzyKey.value)
}
const getPnList = (tag: any, key: any) => {
  getPListDataApi({
    currentPage: page.value,
    pageSize: size.value,
    provinceName: adProvince.value,
    cityName: adCity.value,
    districtName: adDistinguish.value,
    sku: sysId,
    fuzzyTag: tag,
    cardId: formData.h5_card_id,
    fuzzyPhone: key
  }).then((res) => {
    console.log(res)
    phoneNumberList.value = res.data.orderList
    count.value = res.data.total
    currentIndex.value = -1
  })
}
const closePup = () => {
  fuzzyKey.value = ""
  searchKey.value = ""
}
const actClass = (index: any, item: any) => {
  currentIndex.value = index
  changeNumber.value = item.phone
  changeType.value = item.phone_type
}
const changeSure = () => {
  const PReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/

  if (PReg.test(changeNumber.value)) {
    formData.h5_handle_mobile = changeNumber.value
  }
  formData.phone_type = changeType.value
  fuzzyKey.value = ""
  showNumber.value = false
}
const onCancel = () => {
  fuzzyKey.value = ""
  searchKey.value = ""
  getPnList("", "")
}

const changeNumber = ref<any>("")
const changeType = ref<any>("")
const showNumber = ref<boolean>(false)

const seeMore = () => {
  // if (page.value * size.value >= count.value) return showToast("数据加载完毕")
  page.value++
  fuzzyKey.value = ""
  searchKey.value = ""
  getPnList("", "")
}
const onOversize = (file: any) => {
  console.log(file)
  showToast("文件大小不能超过 25M")
}
/**END */
defineOptions({
  name: "ProductH5"
})
</script>
<template>
  <div
    :style="`width: 7.5rem; height: ${isHeight}; margin: 0 auto; overflow-y: hidden;background:url(${imgUrl})no-repeat;background-size: 100%`"
    ref="root"
    class="boxh5"
  >
    <div class="form" style="position: relative" :style="{ top: isCardPhoto ? '8rem' : '9.3rem' }" v-if="flag">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.h5_card_name"
            name="姓名"
            label="姓名"
            size="small"
            placeholder="请输入身份证姓名(已加密)"
          />
          <van-field
            v-model="formData.h5_card_id"
            name="身份证"
            label="身份证号"
            size="small"
            placeholder="请输入身份证号(已加密)"
          />
          <van-field
            v-model="formData.h5_phone"
            name="联系电话"
            label="联系电话"
            type="tel"
            size="small"
            placeholder="请填写并保持通话通畅"
          />
          <van-field
            v-model="carderAd"
            is-link
            size="small"
            readonly
            label="收货地址"
            placeholder="请选择所在地区"
            @click="show = true"
          />
          <van-popup v-model:show="show" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="options"
              @close="show = false"
              @finish="onFinish"
            />
          </van-popup>
          <van-field
            v-model="formData.h5_address"
            name="详细地址"
            label="详细地址"
            size="small"
            placeholder="如街道,道路,小区,门牌号"
          />
          <!-- v-if="isChange" -->
          <!-- <el-select
            v-if="isChange"
            class="van-cell"
            v-model="formData.h5_handle_mobile"
            clearable
            filterable
            placeholder="请选择您需要的号码"
            style="width: 100%; color: #fff"
            :disabled="!cascaderValue"
            v-loadMore="seeMore"
          >
            <el-option
              v-for="item in phoneNumberList"
              :key="item"
              :label="item"
              :value="item"
              :disabled="item.state === 'false'"
            />
          </el-select> -->
          <van-field
            v-if="isChange"
            v-model="formData.h5_handle_mobile"
            is-link
            size="small"
            readonly
            label="自主选号"
            placeholder="请选择您所需的号码"
            @click="changeNb"
          />
          <van-popup
            v-model:show="showNumber"
            round
            position="bottom"
            :style="{ height: '70%' }"
            closeable
            close-icon="close"
            @close="closePup"
            :safe-area-inset-top="true"
          >
            <div>
              <van-search
                v-model="fuzzyKey"
                @search="searchNum"
                @cancel="onCancel"
                show-action
                placeholder="请输入你喜欢的数字(至少3位)"
              >
                <template #action>
                  <div @click="onClickButton">搜索</div>
                </template>
              </van-search>
            </div>
            <div v-if="phoneNumberList.length">
              <div class="ullist flexb">
                <div
                  class="lili"
                  :class="{ act: index == currentIndex }"
                  v-for="(item, index) in phoneNumberList"
                  :key="item.phone"
                  @click="actClass(index, item)"
                >
                  <van-highlight
                    :keywords="searchKey ? searchKey : item.phone.slice(3, 7)"
                    :source-string="item.phone"
                    highlight-class="custom-class"
                  />
                </div>
                <div class="replay">
                  <van-button icon="replay" type="default" @click="seeMore" block>换一批</van-button>
                </div>
              </div>
              <div class="fotter_btn">
                <van-button type="danger" :disabled="currentIndex == -1" @click="changeSure">确认选择</van-button>
              </div>
            </div>
            <div v-else><van-empty description="暂无数据" /></div>
          </van-popup>
          <div v-if="isCardPhoto" class="photo">
            <div
              class="van-hairline--bottom van-col van-col--24"
              style="color: rgb(17, 17, 17); padding: 20px; font-size: 14px; font-weight: bold"
            >
              根据有关部门要求，必须上传真实身份证照片。<span style="color: red">未上传照片，订单无效。</span>
            </div>
            <div class="card-face">
              <van-uploader
                v-model="fileList"
                multiple
                :max-count="1"
                :max-size="1024 * 1024 * 25"
                @oversize="onOversize"
              />
              <img class="example" src="@/assets/layout/face.png" alt="" />
              <div class="uploader-tip text_left">
                {{ upTips }}
              </div>
            </div>
            <div class="card-back">
              <van-uploader
                v-model="fileList1"
                multiple
                :max-count="1"
                :max-size="1024 * 1024 * 25"
                @oversize="onOversize"
              />
              <img class="example" src="@/assets/layout/back.jpg" alt="" />
              <div class="uploader-tip text_left">
                {{ upTips }}
              </div>
            </div>
            <div class="card-head">
              <van-uploader
                v-model="fileList2"
                multiple
                :max-count="1"
                :max-size="1024 * 1024 * 25"
                @oversize="onOversize"
              />
              <img class="example" src="@/assets/layout/head.png" alt="" />
              <div class="uploader-tip text_left">
                {{ upTips1 }}
              </div>
            </div>
          </div>
          <van-checkbox
            v-model="checked"
            label-disabled
            style="font-size: 12px; margin-top: 0.1rem"
            icon-size="18px"
            checked-color="#07c160"
            >我已同意 <span class="cp" @click=";(show1 = true), (RWORYH = 'RW')">《入网协议》</span
            ><span class="cp" @click=";(show1 = true), (RWORYH = 'YH')">《用户隐私政策》</span></van-checkbox
          >
        </van-cell-group>
        <div class="btn1" v-if="!isPbtn">
          <!-- <div style="padding-left: 0.5rem; text-align: center">
            <van-icon name="fire" size=".25rem" color="#ee0a24" />
            <span style="margin-left: 0.2rem; font-size: 12px"
              >活动火爆进行中已有 <i class="number">{{ num }}</i
              >人领取</span
            >
          </div> -->
          <van-button round block type="success" native-type="submit"> 立即预约 </van-button>
        </div>
        <div style="margin-top: -0.3rem" class="pbtn btn1" v-else>
          <van-button round block type="success" native-type="submit"> 立即预约 </van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model:show="show1" round position="bottom" closeable close-icon="close">
      <xie-yi :YYS="YYS" :RWORYH="RWORYH" />
    </van-popup>
    <van-overlay :show="showOver && ewmpop !== ''" @click="showOver = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <!-- <img v-if="ewmpop" src="@/assets/layout/gzhewm.png" /> -->
          <img :src="`${commonStore.BASEURL}/image/${ewmpop}`" />
        </div>
      </div>
    </van-overlay>
    <van-button type="success" round class="orderSearch" size="mini" :to="`/orderSearch?tid=${tid}`">
      订单查询
    </van-button>
    <van-overlay :show="show2" @click="show2 = false">
      <div class="wrapper" @click.stop>
        <div class="block123">
          <van-loading vertical>
            <template #icon>
              <van-icon name="star-o" size="30" />
            </template>
            提交中...
          </van-loading>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<style lang="scss" scoped>
img {
  width: 100%;
  overflow: clip;
}
:deep(.van-cell-group) {
  background-color: transparent;
}
:deep(.van-cell) {
  background-color: #000;
  color: #fff;
  margin-bottom: 0.1rem;
  border-radius: 0.5rem;
  line-height: 0.6rem;
  // padding: 0.16rem;
  font-size: 12px;
}
:deep(.van-search__field) {
  background-color: transparent !important;
}
:deep(.van-search) {
  .van-field__control {
    color: #000;
  }
}
:deep(.van-field__label) {
  color: #fff;
}
:deep(.van-field__control) {
  color: #fff;
}
:deep(.van-button--block) {
  width: 7rem;
  height: 0.7rem;
  margin: 0.4rem auto;
}
:deep(.van-cell:after) {
  border-bottom: 0;
}

:deep(.van-checkbox__label) {
  vertical-align: bottom;
  color: #000;
}
.cp {
  cursor: pointer;
}
.pbtn {
  position: fixed;
  bottom: 0.3rem;
  left: 50%;
  margin-left: -3.5rem;
}
.btn1 {
  animation: myfirs_a 1.5s infinite;
}
.btn2 {
  position: relative;
  z-index: -1;
}
.number {
  animation: myfirs_b 1.5s infinite;
  font-style: normal;
  color: red;
}
@keyframes myfirs_a {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes myfirs_b {
  0% {
    font-size: 12px;
  }
  50% {
    font-size: 14px;
  }
  100% {
    font-size: 12px;
  }
}
.orderSearch {
  position: fixed;
  padding: 0.24rem 0.3rem;
  // padding-right: 0.2rem;
  top: 1rem;
  right: -0.2rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border: 0;
  font-size: 14px;
  font-weight: 700;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.form {
  padding: 0.3rem 0.2rem;
  // background-color: #fff;
}
.itemicon {
  padding-left: 0.14rem;
  margin-bottom: 0.2rem;
  font-size: 14px;
  color: #3976ff;
  font-weight: bold;
  margin-top: 0.2rem;
}
.itemicon::before {
  content: " ";
  position: absolute;
  width: 2px;
  height: 9px;
  top: 50%;
  left: 0;
  transform: translate(0, -4.5px);
  background: #3976ff;
}
.van-hairline--bottom::after {
  border-bottom-width: 1px;
}
[class*="van-hairline"]::after {
  content: " ";
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: 0 solid #eee;
}
[class*="van-hairline"] {
  position: relative;
}
:deep(.van-uploader__upload) {
  width: 3rem;
  height: 2rem;
}
:deep(.van-uploader__preview-image) {
  width: 3rem;
  height: 2rem;
}
.photo {
  margin-top: 0.2rem;
}
.example {
  width: 3rem;
  height: 2rem;
  vertical-align: top;
}
.text_left {
  text-align: left;
}
.uploader-tip {
  color: #333;
  font-size: 12px;
  // text-align: center;
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #f7f8fa;
  padding-bottom: 0.1rem;
  margin-bottom: 0.1rem;
  vertical-align: super;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 100%;
}

.block123 {
  width: 120px;
  height: 120px;
  // background-color: #fff;
}
.block {
  width: 100%;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
:deep(.van-overlay) {
  background: rgba(0, 0, 0, 0.6);
}
:deep(.el-select .el-input__wrapper) {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
}
:deep(.el-select .el-input__inner) {
  border: none !important;
  box-shadow: none;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0 !important;
}
:deep(.select-trigger, .el-tooltip__trigger, .el-tooltip__trigger) {
  width: 100%;
}
:deep(.el-select .el-input.is-disabled .el-input__wrapper:hover) {
  box-shadow: none !important;
}
:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}
.ullist {
  position: relative;
  padding: 0 0.2rem 1.2rem 0.2rem;
}
:deep(.van-search) {
  padding-top: 0.9rem;
}
.flexb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lili {
  border: 1px #eeeeee solid;
  padding: 0.2rem;
  font-size: 0.32rem;
  font-weight: bold;
  width: 3.2rem;
  margin: 0.1rem 0;
  text-align: center;
  border-radius: 0.1rem;
}
:deep(.custom-class) {
  color: red;
  margin: 0 0.1rem;
}
.act {
  background: rgb(255, 45, 75);
  color: #ffffff !important;
  :deep(.custom-class) {
    color: #ffffff !important;
    margin: 0 0.1rem;
  }
}
.fotter_btn {
  position: fixed;
  bottom: 0;
  padding: 0.1rem 0;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  :deep(.van-button) {
    width: 100%;
    vertical-align: text-top;
  }
}
:deep(.van-button--block) {
  margin: 0 auto !important;
}
.replay {
  :deep(.van-button) {
    border: 0;
    color: rgb(64, 155, 250);
  }
}
</style>
